<template>
  <a-radio-group v-if="tagType=='radio'" v-bind="$attrs" @change="handleInput" :value="getValueSting" :disabled="disabled">
    <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.itemValue">{{ item.itemText || item.label }}</a-radio>
  </a-radio-group>

  <a-radio-group v-else-if="tagType=='radioButton'" v-bind="$attrs" buttonStyle="solid" @change="handleInput" :value="getValueSting" :disabled="disabled">
    <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.itemValue">{{ item.itemText || item.label}}</a-radio-button>
  </a-radio-group>

  <a-select
    v-else-if="tagType=='select'"
    :showSearch="showSearch"
    v-bind="$attrs"
    :getPopupContainer="getPopupContainerFn"
    :placeholder="placeholder"
    :disabled="disabled"
    :value="getValueSting"
    :filterOption="filterOption"
    @change="handleInput"
  >
    <a-select-option :value="undefined" v-if="empty">请选择</a-select-option>
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.itemValue">
      <!-- <span class="w-full inline-block" :title=" item.itemText || item.label "> -->
        {{ item.itemText || item.label }}
      <!-- </span> -->
    </a-select-option>
  </a-select>
</template>

<script>
import { initDictOptions } from './ZDictSelectUtil'
export default {
  name: 'ZDictSelectTag',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    dictCode: String,
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: Boolean,
    value: [String, Number],
    type: String,
    getPopupContainer: {
      type: Function,
      default: () => document.body
      // default: (node) => node.parentNode
    },
    popupContainer: String, // 自定义属性，方便设置下拉框popupContainer属性 body|parent
    options: Array, // [{label:'',value:''}]
    defaultValue: Boolean,
    empty: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      dictOptions: [],
      tagType: ''
    }
  },
  watch: {
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData()
      }
    },
    options: {
      handler() {
        this.setCurrentDictOptions()
      },
      deep: true
    }
  },
  created() {
    if (!this.type || this.type === 'list') {
      this.tagType = 'select'
    } else {
      this.tagType = this.type
    }
  },
  computed: {
    getValueSting() {
      // 当有null或“” placeholder不显示
      return this.value != null ? this.value.toString() : undefined
    }
  },
  methods: {
    initDictData() {
      if (this.options) {
        this.dictOptions = this.getOptions(this.options)
        return
      }
      // 根据字典Code, 初始化字典数组
      initDictOptions(this.dictCode).then(res => {
        if (res.success && res.result) {
          this.dictOptions = res.result.items
          if (!this.value && this.defaultValue) this.handleInput(res.result.dictDefaultValue)
        }
      })
    },
    handleInput(e = '') {
      let val
      if (Object.keys(e).includes('target')) {
        val = e.target.value
      } else {
        val = e
      }
      this.$emit('change', val)
    },
    getPopupContainerFn(node) {
      if (this.popupContainer === 'body') {
        return document.body
      } else if (this.popupContainer === 'parent') {
        return node.parentNode
      }
      return this.getPopupContainer(node)
    },
    setCurrentDictOptions(dictOptions) {
      this.dictOptions = this.getOptions(dictOptions)
    },
    getCurrentDictOptions() { // 外部获取Options
      return this.dictOptions
    },
    getOptions(list) {
      const options = []
      list.forEach(item => {
        options.push({
          itemText: item.label || item.itemText,
          itemValue: item.value || item.itemValue
        })
      })
      return options
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>
